<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .container{
        width: 800px;
        height: 400px;
        margin: 0 auto;
        position: relative;
    }
    .content{
        width: 800px;
        height: 400px;
        margin: 0 auto;
        position: relative;
        
    }
    .content>a{
        display: block;
        width: 800px;
        height: 400px;
        position: absolute;
    }
    .btn{
        width: 50px;
        height: 100px;
        position: absolute;
        top: 150px;
        margin: 0 auto;
    }
    #goPre{
        left: 0;
    }
    #goNext{
        right: 0;
    }
</style>
<body>
    <div class="container">
        <div class="content">
            <a href=""><img :src="imgArr[index]" alt="" height="400px" width="800px"></a>
        </div>
        <button type="button" class="btn" id="goPre" @click="prev"><</button>
        <button type="button" class="btn" id="goNext" @click="next">></button>
    </div>
    <script>
        var app = new Vue({
            el: ".container",
            data: {
                imgArr: [
                    "./1.jpg",
                    "./2.jpeg",
                    "./3.jpeg",
                    "./4.jpeg",
                    "./5.jpeg",
                    "./6.jpeg",
                    "./7.jpg"
                ],
                index: 0
            },
            methods: {
                prev: function(){
                    if(this.index>0){
                        this.index--
                    }
                    else
                    this.index=6
                   
                },
                next: function(){
                    if(this.index<6){
                        this.index++
                    }else
                    this.index=0;
                },
            },
            created() {
                setInterval(() => {
                    this.next();
                }, 5000);
            }
        })
    </script>
</body>
</html>